<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>MVC DOH Test</title>
	<style>
		@import "../../../../../dojo/resources/dojo.css";
		@import "../../../../../dijit/tests/css/dijitTests.css";
		@import "../css/app-format.css";
	</style>
	<link id="themeStyles" rel="stylesheet" href="../../../../../dijit/themes/claro/claro.css"/>
	<script src="../../../../../dojo/dojo.js" type="text/javascript" djConfig="isDebug: true"></script>
	<script type="text/javascript" src="../helpers.js"></script>
	<script type="text/javascript">
		dojo.require("dojox.mvc");
		dojo.require("dojox.mvc.Group");
		dojo.require("dijit.form.TextBox");
		dojo.require("dijit.form.Button");
		dojo.require("dojo.parser");

		  // Initial data with a noticeable hierarchy
		  var order = {
			  "Serial" : "360324",
			  "First"  : "John",
			  "Last"   : "Doe",
			  "Email"  : "jdoe@example.com",
			  "ShipTo" : {
				  "Type" : "Home",
				  "Address" : {
					  "Street" : "123 Valley Rd",
					  "City"   : "Katonah",
					  "State"  : "NY",
					  "Zip"	   : "10536"
				  },
				  "Telephone" : {
					  "AreaCode" : "123",
					  "Landline" : {
						  "Number"	  : "456-7890",
						  "Extension" : "42"
					  },
					  "Cell" : {
						  "Number"	  : "765-4321"
					  }
				  }
			  },
			  "BillTo" : {
				  "Type" : "Office",
				  "Address" : {
					  "Street" : "17 Skyline Dr",
					  "City"   : "Hawthorne",
					  "State"  : "NY",
					  "Zip"	   : "10532"
				  },
				  "Telephone" : {
					  "AreaCode" : "098",
					  "Landline" : {
						  "Number"	  : "765-4321",
						  "Extension" : "24"
					  },
					  "Cell" : {
						  "Number"	  : "123-4567"
					  }
				  }
			  }
		  };

		  // The dojox.mvc.StatefulModel class creates a data model instance
		  // where each leaf within the data model is decorated with dojo.Stateful
		  // properties that widgets can bind to and watch for their changes.
		  var model = dojox.mvc.newStatefulModel({ data : order });
		  var selectedAddr = dojox.mvc.newStatefulModel({ data : "ShipTo" });
	</script>

	<script type="text/javascript">
		dojo.require('doh.runner');
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dojo.parser"); // scan page for widgets and instantiate them

		dojo.addOnLoad(function() {

		doh.register("parse", function() {
			dojo.parser.parse();
		});

		// should be able to verify all of the inputs 
		doh.register("check initial values and bindings", [{
			name : "initial",
			runTest : function() {
				var serial1, bind1, addr1;
				//test serialInput
				serial1 = dijit.byId("serialInput");
				if (serial1) {
					bind1 = serial1.get("binding");
					if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
						doh.is("360324", bind1.data,"bind1.data should be set");
						doh.is("360324", bind1.value,"bind1.value should be set");
					}
				}
				//test addrLabel
				addr1 = dijit.byId("addrLabel");
				if (addr1) {
					bind1 = addr1.get("binding");
					if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
						doh.is("ShipTo", bind1.data,"bind1.data should be set");
						doh.is("ShipTo", bind1.value,"bind1.value should be set");
					}
				}
				//test streetInput
				addr1 = dijit.byId("streetInput");
				if (addr1) {
					bind1 = addr1.get("binding");
					if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
						doh.is("123 Valley Rd", bind1.data,"bind1.data should be set");
						doh.is("123 Valley Rd", bind1.value,"bind1.value should be set");
					}
				}
			}
		}]);

		doh.register("check BillTo", [{
			name : "testBillTo",
			runTest : function() {
				setRef('addrGroup', 'model.BillTo');
				
				var serial1, bind1, addr1;
				//test serialInput
				serial1 = dijit.byId("serialInput");
				if (serial1) {
					bind1 = serial1.get("binding");
					if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
						doh.is("360324", bind1.data,"bind1.data should be set");
						doh.is("360324", bind1.value,"bind1.value should be set");
					}
				}
				//test addrLabel
				addr1 = dijit.byId("addrLabel");

				if (addr1) {
					bind1 = addr1.get("binding");
					if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
						doh.is("ShipTo", bind1.data,"bind1.data should be set");
						doh.is("BillTo", bind1.value,"bind1.value should be set");
					}
				}
				//test streetInput
				addr1 = dijit.byId("streetInput");
				if (addr1) {
					bind1 = addr1.get("binding");
					if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
						doh.is("17 Skyline Dr", bind1.data,"bind1.data should be set");
						doh.is("17 Skyline Dr", bind1.value,"bind1.value should be set");
					}
				}
			}
		}]);

		doh.register("check ShipTo", [{
			name : "testShipTo",
			runTest : function() {
				setRef('addrGroup', 'model.ShipTo');
				
				var serial1, bind1, addr1;
				//test serialInput
				serial1 = dijit.byId("serialInput");
				if (serial1) {
					bind1 = serial1.get("binding");
					if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
						doh.is("360324", bind1.data,"bind1.data should be set");
						doh.is("360324", bind1.value,"bind1.value should be set");
					}
				}
				//test addrLabel
				addr1 = dijit.byId("addrLabel");
				if (addr1) {
					bind1 = addr1.get("binding");
					if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
						doh.is("ShipTo", bind1.data,"bind1.data should be set");
						doh.is("ShipTo", bind1.value,"bind1.value should be set");
					}
				}
				//test streetInput
				addr1 = dijit.byId("streetInput");
				if (addr1) {
					bind1 = addr1.get("binding");
					if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
						doh.is("123 Valley Rd", bind1.data,"bind1.data should be set");
						doh.is("123 Valley Rd", bind1.value,"bind1.value should be set");
					}
				}
			}
		}]);

		doh.register("change ShipTo", [{
			name : "testShipTo",
			runTest : function() {
				setRef('addrGroup', 'model.ShipTo');
				//set streetInput
				addr1 = dijit.byId("streetInput");
				if (addr1) {
					addr1.set("value","456 Mountain Rd");
				}
				setRef('addrGroup', 'model.BillTo');
				setRef('addrGroup', 'model.ShipTo');
				
				var serial1, bind1, addr1;
				//test serialInput
				serial1 = dijit.byId("serialInput");
				if (serial1) {
					bind1 = serial1.get("binding");
					if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
						doh.is("360324", bind1.data,"bind1.data should be set");
						doh.is("360324", bind1.value,"bind1.value should be set");
					}
				}
				//test addrLabel
				addr1 = dijit.byId("addrLabel");
				if (addr1) {
					bind1 = addr1.get("binding");
					if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
						doh.is("ShipTo", bind1.data,"bind1.data should be set");
						doh.is("ShipTo", bind1.value,"bind1.value should be set");
					}
				}
				//test streetInput
				var addr1s = dijit.byId("streetInput");
				if (addr1s) {
					bind1s = addr1s.get("binding");
					if (bind1s && bind1s.isInstanceOf(dojox.mvc.StatefulModel)) {
						doh.is("456 Mountain Rd", bind1s.value,"bind1s.value should be set");
						bind1s.commit();
						doh.is("456 Mountain Rd", bind1s.data,"bind1s.value should be set after commit");
					}
				}
				//test streetInput
				var addr1c = dijit.byId("cityInput");
				if (addr1c) {
					bind1c = addr1c.get("binding");
					if (bind1c && bind1c.isInstanceOf(dojox.mvc.StatefulModel)) {
						doh.is("Katonah", bind1c.value,"bind1c.value should be set");
						doh.is("Katonah", bind1c.data,"bind1c.data should be set");
					}
				}
			}
		}]);

		doh.run();

		});
	</script>
</head>


	<body class="claro">
		<div id="wrapper">
		<div id="header">
		  <div id="navigation">
		  </div>
		  <div id="headerInsert">
			<h1>Order Shipping Details</h1>
			<h2>Data Binding Example - Hierarchical data.</h2>
		  </div>
		</div>
		<div id="main">
		  <div id="leftNav">
		  </div>
		  <div id="mainContent">
		<!--
			The group container denotes some logical grouping of widgets and also serves
			to establish a parent data binding context for its children.
			The ref attribute for the outermost container obtains the binding from the
			"page scope" itself.
		-->
		<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'model'">
			<div class="row">
				<label class="cell" for="serialInput">Order #:</label>
				<input class="cell" id="serialInput" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: 'Serial'"/>
			</div>
			<div class="row">
				<label class="cell" for="lastnameInput">Last name:</label>
				<input class="cell" id="lastnameInput" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: 'Last'"/>
			</div>
			<div class="row">
				<label class="cell" for="emailInput">Email:</label>
				<input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: 'Email'"/>
			</div>
		</div>
		<br/>
		Choose:
		<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setRef('addrGroup', 'model.ShipTo');}">Ship To</button>
		<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setRef('addrGroup', 'model.BillTo');}">Bill To</button>
		<br/>
		<div class="row">
			<label class="cell" for="addrLabel">Selected Address:</label>
			<input class="cell" data-dojo-type="dijit.form.TextBox" id="addrLabel"
								data-dojo-props="ref: 'selectedAddr'"/>
		</div>
		<br/>
		<!--
			For convenience, the widget hierarchy matches the data hierarchy
			(see JSON literal above).
			In this implementation, the child ref attributes are simple property names
			of the parent binding context.
			The ref attribute may support more advanced constructs, such as queries
			over the parent widget's or other application specified binding context.
		-->
		  <div id="addrGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'model.ShipTo'">
			<div class="row">
			  <label class="cell" for="typeInput">Type:</label>
			  <input class="cell" id="typeInput" data-dojo-type="dijit.form.TextBox"
								  data-dojo-props="ref: 'Type'"/>
			</div>
			<div id="postalGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'Address'">
			  <div class="row">
				  <label class="cell" for="streetInput">Street:</label>
				  <input class="cell" id="streetInput" data-dojo-type="dijit.form.TextBox"
									  data-dojo-props="ref: 'Street'"/>
			  </div>
			  <div class="row">
				  <label class="cell" for="cityInput">City:</label>
				  <input class="cell" id="cityInput" data-dojo-type="dijit.form.TextBox"
									  data-dojo-props="ref: 'City'"/>
			  </div>
			  <div class="row">
				  <label class="cell" for="stateInput">State:</label>
				  <input class="cell" id="stateInput" data-dojo-type="dijit.form.TextBox"
									  data-dojo-props="ref: 'State'"/>
			  </div>
			  <div class="row">
				  <label class="cell" for="zipInput">Zipcode:</label>
				  <input class="cell" id="zipInput" data-dojo-type="dijit.form.TextBox"
									  data-dojo-props="ref: 'Zip'"/>
			  </div>
			</div>
			<div id="telGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'Telephone'">
			  <div class="row">
				  <label class="cell" for="areacodeInput">Area code:</label>
				  <input class="cell" id="areacodeInput" data-dojo-type="dijit.form.TextBox"
										 data-dojo-props="ref: 'AreaCode'"/>
			  </div>
			  <div id="llGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'Landline'">
				<div class="row">
				  <label class="cell" for="numberInput">Landline Number:</label>
				  <input class="cell" id="numberInput" data-dojo-type="dijit.form.TextBox"
									  data-dojo-props="ref: 'Number'"/>
				</div>
				<div class="row">
				  <label class="cell" for="extInput">Extension:</label>
				  <input class="cell" id="extInput" data-dojo-type="dijit.form.TextBox"
									  data-dojo-props="ref: 'Extension'"/>
				</div>
			  </div>
			  <div class="row" id="cellGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'Cell'">
				  <label class="cell" for="cellInput">Cell Number:</label>
				  <input class="cell" id="cellInput" data-dojo-type="dijit.form.TextBox"
									  data-dojo-props="ref: 'Number'"/>
			  </div>
			</div>
			<br/>
			Model:
			<button id="reset" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){model.reset();}">Reset</button>
		</div></div></div>
		<script type="text/javascript">
			function setRef(id, addrRef) {
				var widget = dijit.byId(id);
				widget.set("ref", addrRef);
				if(addrRef == "model.ShipTo")
					selectedAddr.set("value", "ShipTo");
				else
					selectedAddr.set("value", "BillTo");
			}
		</script>
	</body>

</html>
